<template>
	 <view class="u-page">
		 <u-toast ref="uToast" /><u-no-network></u-no-network>
		 <u-navbar title="计划详情" safeAreaInsetTop fixed placeholder>
		     <view class="coreshop-navbar-left-slot" slot="left">
		         <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
		         <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
		         <u-icon name="home" size="22" @click="goHome"></u-icon>
		     </view>
		     <view slot="right">
		     </view>
		 </u-navbar>
		<view class="u-page">
			<view style="content:''; overflow: hidden;"></view>
			
			<plan-head :planInfo="planInfo" :planType="planType"></plan-head>
			
			
			<!-- 昨日未完成计划 -->
			<yesterday-plan title="昨日未完成计划" :userData="userData" @bindExplain="bindExplain" ref="yesterday"></yesterday-plan>
			
			
			<template v-if="addPlanItem.length">
				<view v-for="(item,index) in addPlanItem" :key="item.key" class="edit-box">
					<edit-item
						type="add"
						:userData="userData"
						:addRowList="planItemList"
						:planInfo="planInfo"
						:item="item"
						@delItem="delItem(index)"
						@publishSure="getDetail">
					</edit-item>
				</view>
			</template>
			<view class="coreshop-flex coreshop-justify-center coreshop-align-center card" @click="addItem">
				<view slot="body" class="coreshop-flex coreshop-justify-center add-btn">
					<u-icon name="plus" custom-prefix="custom-icon" color="#157EFB" :bold="true" size="15" :custom-style="{'margin-right':'14rpx'}"></u-icon>
					添加事项
				</view>
			</view>
			
			<!-- 完成情况说明 -->
			<explain-box 
				v-if="showExplainPop"
				@cancelExplain="cancelExplain"
				@explainSure = "explainSure"
				:userData="userData"
				:editExplainInfo="editExplainInfo"
			></explain-box>
		</view>
	</view>
</template>

<script>
	import planHead from '@/pages/member/agent/components/planDetail/head.vue';//计划头部 
    import yesterdayPlan from './components/yesterdayPlan.vue';//昨日未完成计划
	import explainBox from './components/explain.vue';//完成情况说明
	import editItem from './components/editItem.vue'; 
	
	export default{
		data(){
			return{
				planType:"", //计划类型
				planInfo:{},
				userData:{},
				addPlanItem:[],//今日新增计划
				showExplainPop:false,
				editExplainInfo:{},
			}
		},
		components:{
			planHead,
			yesterdayPlan,
			editItem,
			explainBox
		},
		onLoad() {
			this.userData=this.$store.state.userInfo;
			if(this.userData.id==undefined) this.getUserInfo();
		},
		onShow() {
			this.getTodayWorkPlan();
		},
		methods:{
			getUserInfo() {
				var _this = this 
				 
					this.$u.api.userInfo().then(res => {
						if (res.status) {
							_this.userData = res.data  
						}  
					}) 
			},
			getTodayWorkPlan(){
				let self=this;
				this.$u.api.getTodayWorkPlan().then(res => {
				    if (res.status) {
						if(res.data!=null){
							self.planInfo=res.data; 
							self.typeList=self.$db.get('workPlanType');
							self.planType=self.$common.getLabelFromID(self.planInfo.jhlx,self.typeList) ;
						}
				    }
				});
			},
			//完成情况
			bindExplain(d){ 
				this.editExplainInfo = d;
				this.showExplainPop = true;
			},
			cancelExplain(){
				this.showExplainPop = false;
			},
			//完成情况保存
			explainSure(t){
				const _this = this;
				switch(t){
					case 'yesterday':
						_this.$refs.yesterday.getYesterDayList();
						_this.cancelExplain();
						break;
					case 'today':
						_this.getDetail();
						_this.cancelExplain();
						break;
				}
			},
			//新增项
			addItem(){
				this.addPlanItem.push({key: new Date().getTime()});
			},
			delItem(idx){
				this.addPlanItem.splice(idx,1);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-page{
		height: 100%;
		&::v-deep{
			&{
				.u-field{
					padding: 0!important;
				}
				.u-avatar{
					font-size: 32rpx;
					color: #fff;
				}
			}
		}
	}
	.plan-item-list{
		padding: 0 20rpx;
	}
	
	// 新增计划
	.add-btn{
		font-size: 26rpx;
		color: #157EFB;
		text-align: center;
		line-height: 40rpx;
	}
	.edit-box{
		margin: 20rpx;
	}  
	.card{
		border: 1px solid #F7F7F7;background-color: #FFFFFF;border-radius:16rpx;height: 90rpx; margin: 20rpx;padding:20rpx;
	}
</style>